<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>聊天</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <!-- 引入样式vant -->
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app" class="flex column aic">
      <div class="lmain w100">
        <div class="bgcf topMain">
          <!-- 顶部 -->
          <div class="pd20">
            <div class="flex jcsb aic">
              <div><van-icon name="arrow-left" class="icon" /></div>
              <div class="flex column aic">
                <div class="fs16 fwb">{{ tellIfo.name }}</div>
                <div>{{ tellIfo.job }}</div>
              </div>
              <div><van-icon name="ellipsis" class="icon" /></div>
            </div>
            <div class="flex jcsb mgt20">
              <div v-for="(i,index) in topIcon" :class="index!=3?'eicon':''">
                <div class="flex column aic">
                  <div><van-icon :name="i.icon" size="23" /></div>
                  <div>{{ i.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="topSafe"></div>
        <!-- 主体 -->
        <div class="chat">
          <!-- 求职者卡片 -->
          <div class="card">
            <!-- 头像姓名 -->
            <div class="flex aic">
              <div class="navar">
                <van-icon name="circle" class="sex" />
              </div>
              <div class="lh18">
                <div class="flex aic">
                  <div class="fwb fs14">
                    期望:&nbsp;{{ tellIfo.wantJob }}&nbsp; &nbsp;
                  </div>
                  <div class="prColor fs14">{{ tellIfo.money }}</div>
                </div>
                <div>
                  {{ tellIfo.shcoolYear }}&nbsp;|&nbsp;{{ tellIfo.edBackground
                  }}&nbsp;|&nbsp;{{ tellIfo.workTime }}
                </div>
              </div>
            </div>
            <div class="flex aic mgt10 mgl10">
              <div><van-icon name="friends-o" />&nbsp;&nbsp;&nbsp;</div>
              <div class="fwb">
                {{ tellIfo.school }}&nbsp;·&nbsp;{{ tellIfo.profession }}
              </div>
            </div>
            <div class="line"></div>
            <div class="fs12 c9">
              {{ tellIfo.createdTime }}沟通的职位-{{ tellIfo.job }}
            </div>
          </div>
          <!-- 聊天区域 -->
          <div v-for="i in tellIfo.tell">
            <div class="fs12 c9 tac">{{ i.createTime }}</div>
            <div class="flex tellBox" :class="i.fman!=0?'retellBox':''">
              <div class="fs12 c9 send">{{ i.states==10?'送达':'已读' }}</div>
              <div class="sayBox pah" :class="i.fman!=0?'sayBoxOrbgc':''">
                {{ i.tellMsg }}
              </div>
              <div class="miniNavar"></div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="safeBottom"></div>
        <div class="footer">
          <div class="flex inputBox jcsb pd8">
            <div class="mtag prBgc">常用语</div>
            <van-field
              v-model="userinput"
              class="textRow"
              placeholder="新消息"
              type="textarea"
              rows="1"
              autosize
            >
            </van-field>
            <div class="mgt8">
              <span class="mgr8"><van-icon name="smile-o" size="26" /></span>
              <span><van-icon name="add-o" size="26" /></span>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>
<style>
  body {
    background-color: #eceaea4f;
    font-size: 12px;
  }
  .bgcf {
    background-color: #fff;
  }
  .topMain {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 10;
    box-sizing: border-box;
  }
  .topSafe {
    height: 140px;
  }
  .icon {
    font-size: 20px;
    font-weight: bold;
  }
  .eicon {
    color: #d3cfcf;
  }
  .card {
    background-color: #fff;
    padding: 12px 25px;
    border-radius: 12px;
    border: 1px solid #d1c8c857;
  }
  .navar {
    width: 50px;
    height: 50px;
    border: 1px solid #eee;
    border-radius: 50px;
    margin-right: 10px;
    position: relative;
  }
  .sex {
    position: absolute;
    font-size: 12px;
    color: #fff;
    background-color: #0fa0e4;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 2px;
    right: 0;
  }
  .line {
    padding-top: 5px;
    border-bottom: 1px solid #f3f2f2;
    margin-bottom: 10px;
  }
  .sayBox {
    padding: 8px;
    max-width: 200px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 10px 10px 0 10px;
    margin: 0 8px;
  }
  .sayBoxOrbgc {
    background-color: rgb(15, 241, 34);
    border-radius: 10px 10px 10px 0;
  }
  .tellBox {
    justify-content: flex-end;
    margin: 20px;
    align-items: flex-end;
  }
  .retellBox {
    flex-direction: row-reverse;
  }
  .miniNavar {
    width: 30px;
    height: 30px;
    border: 1px solid #eee;
    border-radius: 50px;
    background-color: #fff;
  }
  .safeBottom {
    height: 110px;
  }
  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    padding: 10px 5px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .mtag {
    border-radius: 5px;
    text-align: center;
    width: 50px;
    height: 15px;
    padding: 8px 4px;
    font-size: 12px;
    color: #fff;
    margin: 8px 8px 0 0;
  }
  .inputBox {
    line-height: 40xp;
  }
  .textRow {
    width: 180px;
    max-height: 90px;
  }
  .pah{
    white-space:normal;
  }
  @media (min-width: 500px) {
    .chat{
      height: 450px !important;
      overflow-y: scroll;
    }
    .lmain {
      width: 600px;
      background-color: #fff;
      border: 1px solid #999;
      box-sizing: border-box;
    }
    .topMain{
      width: 598px;
      box-sizing: border-box;
    }
    .footer{
      width: 600px;
      bottom: 150px;
      border: 1px solid #999;
      border-top: none;
      border-radius: 0 0 10px 10px;
    }
    .textRow{
      width: 320px;
    }
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      topIcon: [
        { name: "求简历", icon: "orders-o" },
        { name: "换电话/微信", icon: "phone-o" },
        { name: "面试TA", icon: "notes-o" },
        { name: "标记", icon: "flag-o" },
      ],
      tellIfo: {
        name: "金坷垃",
        job: "氮磷钾",
        wantJob: "肥料/不流失",
        money: "4-5k",
        shcoolYear: "24年应届生",
        edBackground: "本科",
        age: "23",
        workTime: "离校-随时到岗",
        school: "圣地亚哥",
        profession: "上帝压狗",
        createdTime: "10月10日",
        //states 0 失败 10 送达 20 已读
        //fman 0 求职者发起 1 boss发起
        tell: [
          {
            tellMsg: `鸟蛤2啊是巨大的觉得吉萨大拉的就传说中撒萨达撒
            啊伟大的我1
            案说法发发阿斯顿飒飒法SaaS2`,
            createTime: "07:10",
            states: 20,
            fman: 0,
          },
          {
            tellMsg: `啊发发噶啥啊伟大的我1案说法发发阿斯顿飒飒法SaaS2`,
            createTime: "07:10",
            states: 10,
            fman: 0,
          },
          {
            tellMsg: `法SaaS2`,
            createTime: "07:10",
            states: 10,
            fman: 1,
          },
          {
            tellMsg: `鸟蛤
            啊伟大的我1
            案说法发发阿斯顿飒飒法SaxxxxxxxxxxxxxxxxxaS2`,
            createTime: "08:10",
            states: 20,
            fman: 0,
          },
          {
            tellMsg: `鸟蛤2啊是巨大的觉得吉萨大拉的就传说中撒萨达撒
            啊伟大的我1
            案说法发发阿斯顿飒飒法SaaS2`,
            createTime: "昨日 08:10",
            states: 10,
            fman: 0,
          },
          {
            tellMsg: `鸟蛤2啊是巨大的觉得吉萨大拉的就传说中撒萨达撒
            啊伟大的我1
            案说法发发阿斯顿飒飒法SaaS2`,
            createTime: "07:10",
            states: 10,
            fman: 1,
          },
        ],
      },
      userinput: "",
    },
    methods: {},
  });
</script>
